<template>
  <van-nav-bar
    title="关注"
    left-arrow
    @click-left="onClickLeft"
    :border="false"
  />
  <div class="allFans">
    <div class="fans">
      <div class="fansLeft">
        <div>
          <img src="@/assets/1.jpeg" alt="" />
        </div>
      </div>
      <div class="fansMid">
        <p>手工客123</p>
      </div>
      <div class="fansRig">
        <span v-show="attShow"  @click="attSpan(1)">已关注</span>
        <span v-show="!attShow" @click="attSpan(2)">+ 关注</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const onClickLeft = () => history.back();
let attShow = ref(true)
function attSpan(cc:any) {
 if(cc==1){
  attShow.value = !attShow.value
 }else{
  attShow.value = !attShow.value
 }
}

</script>
<style scoped>
.fans {
  width: 100%;
  height: 55px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  padding-left: 10px;
}
.fansLeft {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fansMid {
  flex: 4;
  line-height: 55px;
  font-size: 14px;
  color: gray;
}
.fansRig {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.fansRig>span:nth-child(1) {
  border: 1px solid gray;
  padding: 5px;
  border-radius: 8px;
  color: gray;
  font-size: 12px;
}
.fansRig>span:nth-child(2) {
  border: 1px solid red;
  padding: 5px;
  border-radius: 8px;
  color: red;
  font-size: 12px;
}
</style>
<style >
.van-icon-arrow-left:before {
  color: gray;
}
</style>